<template>
    <div>
        <div class="top">
            <div class="tab tab_on">
                <span class="tab_on_left tab_left"><i class="tab_on_left el-icon-goods"></i>课程购买情况</span>
                <button class="tab_right tab_on_right" @click="rouBack"><i class="big el-icon-arrow-left"></i>返回</button>
                <button class="tab_right tab_on_right" @click="Refresh"><i class="big el-icon-refresh-left"></i>刷新</button>
            </div>
        </div>
        <div id="logbookTab">
            <div class="tab">
                <span class="tab_left"><i class="Icon el-icon-s-grid"></i> 课程销售情况</span>
                <el-button-group class="tab_button">
                    <el-button @click="tabledate" size="mini">&nbsp 近七天 &nbsp</el-button>
                    <el-button @click="tableThirtydate" size="mini">&nbsp 近30天 &nbsp</el-button>
                    <el-button @click="tableNinetydate" size="mini">&nbsp 近90天 &nbsp</el-button>
                </el-button-group>
            </div>
            <!-- 表格 -->
            <el-table  border :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" style="width: 100%">
                <el-table-column
                        align="center"
                        type="selection"
                        width="70">
                </el-table-column>
                <!-- 对应字段写好-->
                <el-table-column align="center" prop="courseName" label="课程名称" width="279">
                </el-table-column>
                <el-table-column align="center" prop="number" label="购买数量" sortable width="220">
                </el-table-column>
                <el-table-column align="center" prop="quantityProportion" sortable label="购买比例(%)" width="220">
                </el-table-column>
                <el-table-column align="center" prop="totalPricePerItem" sortable label="购买金额(￥)" width="220">
                </el-table-column>
                <el-table-column align="center" prop="amountProportion" sortable label="总金额比例(%)" width="220">
                </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <div class="block">
                <el-pagination align='center' @size-change="handleSizeChange" @current-change="handleCurrentChange"
                               :current-page="currentPage"
                               :page-sizes="[1,5,10,20]"
                               :page-size="pageSize"
                               layout="total, sizes, prev, pager, next, jumper"
                               :total="tableData.length">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
    import moment from "moment"
    export default {
        props:['product'],
        inject:['reload'],
        data() {
            return {
                //操作日志表格数据
                tableData: [],//搜索量数据
                tableData2:[],//过度数据用的
                tableData3:[],//商品数据
                currentPage: 1, // 当前页码
                total: 20, // 总条数
                pageSize: 5 ,// 每页的数据条数
                Viewdetailsshow:false
            }
        },

        methods: {
            //刷新页面
            Refresh(){
                this.reload();
            },
            //返回上一页
            rouBack(){
                this.$router.back()
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.currentPage = 1;
                this.pageSize = val;
            },
            //当前页改变时触发 跳转其他页
            handleCurrentChange(val) {
                this.currentPage = val;
            },
            //获取近七天销售数据
            tabledate(){
                this.$http.get("/getBuyCourseSalesVolume",{
                    params:{
                        AWeekOrAMonth:'1 WEEK'
                    }
                }).then(res => {
                    this.tableData = res.data;
                });
            },
            //获取近30天销售数据
            tableThirtydate(){
                this.$http.get("/getBuyCourseSalesVolume",{
                    params:{
                        AWeekOrAMonth:'1 MONTH'
                    }
                }).then(res => {
                    this.tableData = res.data;
                });
            },
            //获取近90天销售数据
            tableNinetydate(){
                this.$http.get("/getBuyCourseSalesVolume",{
                    params:{
                        AWeekOrAMonth:'3 MONTH'
                    }
                }).then(res => {
                    this.tableData = res.data;
                });
            }
        },
        //先调用一下传入数据的方法
        created(){
            this.tabledate();
        }

    };



</script>
<style>
    /*背景色*/
    body{
        background: #F9F9F9;
    }
    /*头*/
    .tab_on{
        margin: -20px 0px 12px -20px;
        padding: 0px 10px 4px 0px;
    }
    .tab_left{
        margin: 0px 0px 0px 9px;
        font-size: 13px;
    }
    .tab_on_left{
        color: #A2A2A2;
        font-size: 15px;
    }
    .tab_button{
        margin: 7px 0px 0px 1077px;
        position: absolute;
    }
    .tab{
        height: 42px;
        background: #F3F3F3;
        border: 1px #E4E4E4 solid;
        line-height: 2.5;
    }
    .tab_on_right{
        padding: 4px 17px;
        font-size: 12px;
        color: #9A9A9A;
    }
    .big{
        font-size: 13px;
        padding: 0px 5px 0px 0px;
        font-weight: 900;
    }
    /*    表格*/
    #logbookTab{
        margin: 0px 0px 0px 0px;
    }
</style>